<!--
 * @Description: 求购平台页面组件
 -->
<template>
  <div class="wantedGoods" id="wantedGoods" name="wantedGoods">
    <div class="wantedGoods-header">
      <div class="wantedGoods-title">
        <i class="el-icon-tickets" style="color: #ff6700;"></i>
        求购平台
      </div>
    </div>
    <div class="wantedGoods-content">

      <div data-v-355cce1e="" class="buy-box">
          <!--先判断是否有求购商品-->
          <div v-if="wantedGoodsList.length>0">
              <div v-for="item in wantedGoodsList" :key="item.wantId"
                   data-v-355cce1e="" class="item ivu-card ivu-card-bordered">
                  <div class="ivu-card-body">
                      <div data-v-355cce1e="" class="top-info clearfix">
                          <span data-v-355cce1e="" class="avatar ivu-avatar ivu-avatar-circle ivu-avatar-default ivu-avatar-image">
                              <img :src="$target+item.userImg">
                          </span>
                          <span data-v-355cce1e="" class="username">{{item.userName}}</span>
                          <span data-v-355cce1e="" class="merchant dev-time">{{item.school}}</span>
                          <span data-v-355cce1e="" class="dev-time ivu-time">更新于{{item.updateTime | dateFormat}}</span>
                      </div>

                      <div data-v-355cce1e="" class="dev-issue-item-title">{{item.wantName}}</div>
                      <div data-v-355cce1e="" class="dev-issue-item-title">理想价格:{{item.sellPrice}}</div>
                      <div data-v-355cce1e="" class="content">
                          <div data-v-355cce1e="" class="left-info">
                              <div data-v-355cce1e="" class="dev-issue-item-summary-content">
                                  {{item.wantContent}}
                              </div>
                              <div data-v-355cce1e="" class="contact">
                                  <div data-v-355cce1e="" class="c-item">
                                      手机：{{item.phone}}
                                  </div>
                                  <div data-v-355cce1e="" class="c-item">
                                      qq： {{item.qq}}
                                  </div>
                              </div>
                              <div data-v-355cce1e="" class="dev-issue-item-footer">
                                  <div data-v-355cce1e="" class="dev-issue-item-tags">
                                      <div data-v-355cce1e="" class="ivu-tag ivu-tag-default ivu-tag-border ivu-tag-checked">
                                          <span
                                                  class="ivu-tag-text ivu-tag-color-default">
                                              {{getCategoryNameById(item.goodType)}}
                                          </span>
                                      </div>
                                  </div>
                              </div>
                          </div>
                      </div>
                  </div>
              </div>
          </div>

          <div v-else class="none-product">抱歉暂时没有找到人发布求购商品</div>


      </div>

      <!--分页-->
       <div class="pagination">
         <el-pagination
                 background
                 layout="prev, pager, next"
                 :page-size="pageSize"
                 :total="total"
                 @current-change="currentChange"
         ></el-pagination>
       </div>
       <!-- 分页END-->
    </div>
  </div>
</template>
<script>

export default {
    name: "WantedGoods",
    data() {
        return {
            categoryList:"",//分类列表，
            wantedGoodsList: "", //求购商品列表
            total: 0, // 求购商品总量
            pageSize: 3, // 每页显示的商品数量
            currentPage: 1, //当前页码
        };
    },
    created() {
        //获取求购商品数据
        this.getWantedGoods();
        // 获取分类列表
        this.getCategory();
    },
    activated() {
        //获取求购商品数据
        this.getWantedGoods();
    },
    methods: {
        // 返回顶部
        backtop() {
            const timer = setInterval(function() {
                const top = document.documentElement.scrollTop || document.body.scrollTop;
                const speed = Math.floor(-top / 5);
                document.documentElement.scrollTop = document.body.scrollTop =
                    top + speed;
                if (top === 0) {
                    clearInterval(timer);
                }
            }, 20);
        },
        // 页码变化调用currentChange方法
        currentChange(currentPage) {
            this.currentPage = currentPage;
            this.getWantedGoods();
            this.backtop();
        },
        /*
        * 分页获取求购商品
        * */
        getWantedGoods(){
            this.$axios({
                url:"/api/wanted-goods/AllWantsGoods/"+this.currentPage+"/"+this.pageSize
            }).then(res => {

                    this.wantedGoodsList = res.data.records;
                this.total = res.data.total;
                }).catch(err => {
                return Promise.reject(err);
            });
        },
        // 向后端请求分类列表数据
        getCategory() {
            this.$axios
                .get("/api/goods-category/findAllCategory")
                .then(res => {
                    this.categoryList = res.data;
                }).catch(err => {
                return Promise.reject(err);
            });
        },
        // 根据当前的商品分类id获取对应的分类名
        getCategoryNameById(typeId) {
            for(var j=0; j<this.categoryList.length; j++){
                if(this.categoryList[j].categoryId  == typeId){
                    return  this.categoryList[j].categoryName;
                }
            }
        },
    },
};
</script>
<style scoped>
.wantedGoods {
  background-color: #f5f5f5;
}
.wantedGoods .wantedGoods-header {
  height: 64px;
  background-color: #fff;
  border-bottom: 2px solid #ff6700;
}
.wantedGoods .wantedGoods-header .wantedGoods-title {
  width: 1100px;
  margin: 0 auto;
  height: 64px;
  line-height: 64px;
  font-size: 28px;
}
.wantedGoods .content {

  width: 1000px;
  margin: 0 auto;
}
.wantedGoods .content .goods-list {
  margin-left: -13.7px;
  overflow: hidden;
}
.wantedGoods .wantedGoods-content {
  width: 1000px;
  margin: 0 auto;
  background-color: #f5f5f5;
}

.buy-box[data-v-355cce1e] {
    width:1000px;
    background-color: #fff;
    margin:30px auto
}
.contact[data-v-355cce1e] {
    display:flex;
    color:#888;
    margin-top:15px
}
.contact .c-item[data-v-355cce1e] {
    margin-right:20px
}

.item[data-v-355cce1e] {
    margin-bottom:20px
}
.item .top-info[data-v-355cce1e] {
    display:flex;
    align-items:center
}
.item .top-info .avatar[data-v-355cce1e],.item .top-info .dev-time[data-v-355cce1e],.item .top-info .username[data-v-355cce1e],.item .top-info .vip[data-v-355cce1e] {
    margin-right:8px
}
.ivu-avatar>img{
    width:100%;
    height:100%
}
.ivu-avatar>*{
    line-height:32px
}
.ivu-avatar-image{
    background:0 0
}
.ivu-avatar{
    display:inline-block;
    text-align:center;
    background:#ccc;
    color:#fff;
    white-space:nowrap;
    position:relative;
    overflow:hidden;
    vertical-align:middle;
    width:32px;
    height:32px;
    line-height:32px;
    border-radius:16px
}
.item .top-info .vip[data-v-355cce1e] {
    display:flex;
    align-items:center
}
.ivu-card-body{
    padding:16px
}
.item .top-info .vip img[data-v-355cce1e] {
    width:16px;
    height:16px;
    position:relative;
    top:1px
}
.item .top-info .dev-time[data-v-355cce1e] {
    font-size:12px;
    vertical-align:middle;
    color:#808695
}
.item .dev-issue-item-title[data-v-355cce1e] {
    margin:12px 0;
    color:#17233d;
    font-weight:700;
    font-size:16px
}
.item .content[data-v-355cce1e] {
    display:flex;
    color:#616776;
    justify-content:space-between
}
.ivu-tag-text{
    color:#515a6e
}
.ivu-tag-text a:first-child:last-child{
    display:inline-block;
    margin:0 -8px;
    padding:0 8px
}
.dev-issue-item-footer[data-v-355cce1e] {
    margin-top:15px
}
.dev-issue-item-footer .ivu-tag[data-v-355cce1e] {
    margin-right:10px
}

.ivu-tag{
    display:inline-block;height:22px;line-height:22px;margin:2px 4px 2px 0;padding:0 8px;
    border:1px solid #e8eaec;border-radius:3px;background:#f7f7f7;font-size:12px;
    vertical-align:middle;opacity:1;overflow:hidden;cursor:pointer
}
.ivu-tag-border{
    height:24px;
    line-height:24px;
    border:1px solid #e8eaec;
    color:#e8eaec;
    background:#fff!important;
    position:relative
}
.ivu-tag-border:after{
    content:"";
    display:none;
    width:1px;
    background:currentColor;
    position:absolute;
    top:0;bottom:0;right:22px
}
.ivu-card{
    background:#fff;
    border-radius:4px;
    font-size:14px;
    position:relative;
    -webkit-transition:all .2s ease-in-out;
    transition:all .2s ease-in-out
}
.pagination {
    height: 50px;
    text-align: center;
}


</style>
